{% extends "base_stu.html" %}
{% block content %}
    <div class="row">
        <div class="col-sm-12 ">
            <div class="page-header">
                <h1><span class="text-light-gray">问题生成/ </span>选择答题</h1>
            </div>
            <div class="panel" style="margin-bottom: 70px;">
                <div class="panel-heading">
                    <span class="panel-title">填空/学生答题</span>
                </div>
                <div class="panel-body">
                    <div class="col-sm-4 col-sm-push-8">
                        <div class="panel no-border panel-dark">
                            <div class="panel-body text-center">
                                <p class="text-lg text-slim">
                                    确认已完成答题
                                </p>
                                <div style="margin-top: 20px;">
                                    <a href="#" class="btn btn-lg btn-success btn-flat" data-toggle="modal"
                                       data-target="#modal-faq" id="stuCompletionAnswer">立即提交！</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 col-sm-pull-4">

                        <form method="post" id="completion" name="completion">
                            {% for Info in completion %}
                                <div class="panel panel-info" style="margin:20px 200px 10px 20px">
                                    <div class="panel-heading">
                                        <span class="panel-title">#{{ Info.ID }}</span>
                                        <div class="panel-heading-controls">
                                            <div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
                                        </div>
                                    </div>
                                    <div class="panel-body">
                                        <div class='text-bg' style="margin-left: 30px;">
                                            {{ Info.question }}
                                        </div>
                                        <div class="row">
                                            <div class='col-md-9' id="answerBox" style="margin:20px 20px 5px 25px;">
                                                <textarea class="form-control" name="submitAnswer" rows="5"
                                                          placeholder="输入你的答案"></textarea>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col-md-1">
                                                    <button type="reset" class="btn btn-primary btn-rounded"
                                                            style="margin: 100px 20px 20px;">清空内容
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $("#stuCompletionAnswer").click(function () {
                let stuAnswer = new FormData($('#completion')[0]);
                stuAnswer.append('TypeID', 2);
                {% for Info in completion %}
                    stuAnswer.append('ID', {{ Info.ID }});
                {% endfor %}
                $.ajax({
                    async: false,
                    url: '/service/stu_submit/',
                    type: 'POST',
                    data: stuAnswer,
                    datatype: "JSON",
                    contentType: false,
                    processData: false,
                    success: function () {
                        alert("你已经提交答案！");
                        location.href = '/completion/stu_completion_wrong/'
                    }
                })
            });
        })
    </script>
    <script type="text/javascript">
        init.push(function () {
            // Javascript code here
        })
        window.LanderApp.start(init);
    </script>
{% endblock %}